<template>
  <el-card class="form-container" shadow="never">
    <product-info-detail
      v-model="skuForm"
      :is-edit="isEdit"
      @finishCommit="finishCommit"
    >
    </product-info-detail>
  </el-card>
</template>
<script>
import ProductInfoDetail from "./FormDetail.vue";
import { addProduct, fetchProductInfo, updateProduct } from "@/api/product";
import { cloneDeep } from "lodash/lang";
import { publishStatusEnum } from "@/utils/constant/pms";

const defaultProductParam = {
  /**
   * 职业类别文件url, 默认:无限制
   */
  careerCategoryFileUrl: "",
  /**
   * 犹豫期天数
   */
  freeLookPeriodDay: undefined,
  /**
   * 权益是否直接生效
   */
  isDirectlyGeneratedRights: true,
  /**
   * 是否可直接兑换
   */
  isExchangeable: true,
  /**
   * 产品图片
   */
  pictures: [],
  /**
   * 产品名称
   */
  productName: "",
  /**
   * 上架状态：0->未上架；1->上架状态
   */
  publishStatus: publishStatusEnum.NO,
  /**
   * 备注
   */
  remark: "",
  /**
   * sku信息
   */
  skuInfos: [],
};

export default {
  name: "ProductDetail",
  components: {
    ProductInfoDetail,
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      skuForm: Object.assign({}, defaultProductParam),
    };
  },
  created() {
    if (this.isEdit) {
      fetchProductInfo({ id: this.$route.query.id }).then((response) => {
        const { skuInfos, publishStatus, ...rest } = response.data;
        this.skuForm = {
          ...rest,
          skuInfos: skuInfos.map((skuInfo) => ({
            skuId: skuInfo.id,
          })),
        };
      });
    }
  },
  methods: {
    finishCommit(isEdit, selectedSkuList = []) {
      const skuInfos = selectedSkuList.map((item) => ({
        skuId: item.id,
      }));
      this.$confirm("是否要提交该产品？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (isEdit) {
          updateProduct({
            ...this.skuForm,
            skuInfos,
          }).then(() => {
            this.$message({
              type: "success",
              message: "提交成功",
              duration: 1000,
            });
            this.$router.back();
          });
        } else {
          addProduct({ ...this.skuForm, skuInfos }).then(() => {
            this.$message({
              type: "success",
              message: "提交成功",
              duration: 1000,
            });
            this.$router.back();
          });
        }
      });
    },
  },
};
</script>
<style>
.form-container {
  width: 960px;
}
</style>
